<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    append-to-body
    width="850"
    class="disposeForm"
    :before-close="beforeClose"
  >
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
          style="width: 550px; margin-top: 2px"
        >
          任务详情
        </h4>
        <div style="margin-top: 2px; text-align: right; width: 180px">
          <span
            style="margin: 5px 45px 0 0"
            color="#999"
            class="cursor-pointer"
            @click="revocationItem"
            v-if="
              disposeFrom.createBy == userStore.user.userId &&
              props.dialogParam.isshow
            "
            ><el-icon :size="18" style="font-weight: 600" color="#409EFC"
              ><RefreshLeft /></el-icon
          ></span>

          <span
            style="margin: 5px 32px 0 0"
            color="#999"
            class="cursor-pointer"
            @click="editItem"
            v-if="
              disposeFrom.createBy == userStore.user.userId &&
              props.dialogParam.isshow
            "
            ><el-icon :size="18" color="#409EFC"><EditPen /></el-icon
          ></span>
        </div>

        <!-- <span style="margin: 5px 32px 0 0" color="#999"
          ><el-icon :size="16"><Link /></el-icon
        ></span>
        <span style="margin-top: 5px" color="#999"
          ><el-icon :size="16"><Delete /></el-icon
        ></span> -->
      </div>
    </template>
    <div
      :style="{ height: dialogHeight - 230 + 'px' }"
      class="trans-dialogScroll"
    >
      <div class="title-box">
        <div class="title-box-flex-6">
          <el-icon :size="20" style="float: left; margin-right: 5px"
            ><Flag
          /></el-icon>
          <span style="font-size: 16px; font-weight: 600">{{
            disposeFrom.title
          }}</span>
        </div>
        <div class="title-box-flex-1">
          <el-button
            v-if="disposeFrom.status == '1'"
            round
            icon="Clock"
            size="small"
            type="primary"
            >进行中</el-button
          >
          <el-button
            v-if="disposeFrom.status == '3'"
            round
            icon="Select"
            size="small"
            type="success"
            >已完成</el-button
          >
          <el-button
            v-if="disposeFrom.status == '4'"
            round
            icon="Remove"
            size="small"
            type="danger"
            >未完成</el-button
          >
          <el-button
            v-if="disposeFrom.status == '5'"
            round
            icon="warning"
            size="small"
            type="danger"
            >已撤销</el-button
          >
        </div>
      </div>
      <el-form
        :model="disposeFrom"
        label-width="100px"
        ref="ruleFormRef"
        style="margin-top: 18px"
      >
        <el-form-item label="开始时间：">{{
          disposeFrom.startTime
        }}</el-form-item>
        <el-form-item label="截止时间：">{{
          disposeFrom.endTime
        }}</el-form-item>
        <el-form-item label="关联项目：">
          <span style="margin-right: 20px">
            {{
              rsgl_associated_item.find(
                item => item.value == disposeFrom.businessType
              )
                ? rsgl_associated_item.find(
                    item => item.value == disposeFrom.businessType
                  ).label
                : '--'
            }}
          </span>
          <span>
            ({{ disposeFrom.businessName ? disposeFrom.businessName : '--' }})
          </span>
        </el-form-item>
        <el-form-item label="问题类型：" v-if="disposeFrom.questionType">
          {{
            rsgl_question_type.find(
              item => item.value == disposeFrom.questionType
            )
              ? rsgl_question_type.find(
                  item => item.value == disposeFrom.questionType
                ).label
              : '--'
          }}
        </el-form-item>

        <el-form-item label="任务描述：">
          {{ disposeFrom.remark }}
        </el-form-item>
        <el-form-item label="任务负责人：">
          <!-- <div style="display: block; width: 100%; height: 28px">
            <el-avatar :size="22" :src="circleUrl" />
          </div>
          <div style="font-size: 13px; color: #666">
            {{ disposeFrom.director }}
          </div> -->

          <div class="circleUrl-box">
            <div class="circleUrl-img">
              <div>
                <el-avatar :size="22" :src="circleUrl" />
              </div>
              <div>{{ disposeFrom.director }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="参与人：">
          <div v-for="item in circleUrlList" :key="size" class="circleUrl-box">
            <div class="circleUrl-img">
              <div>
                <el-avatar :size="22" :src="item.img" />
              </div>
              <div>{{ item.title }}</div>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <div class="border-bottom-title">
        <span style="float: left">
          <el-icon :size="22" color="#409EFC"><Link /></el-icon>
        </span>
        <div>附件</div>
      </div>
      <div class="annex-box">
        <div
          class="annex-flex"
          v-for="item in annexList"
          :label="item.id"
          :value="item.id"
          :key="item.id"
        >
          <div class="annex-flex-4">
            <el-icon color="#409EFC" :size="20" style="margin-right: 5px"
              ><DocumentChecked /></el-icon
            >{{ item.origFileName }}
          </div>
          <div class="annex-flex-2">{{ item.createTime }}</div>
          <div class="annex-flex-2">
            <el-avatar
              :size="22"
              :src="circleUrl"
              style="float: left; margin: 10px 2px 0 0"
            />
            {{ item.createName }}
          </div>
          <div class="annex-flex-2">
            <el-button
              type="text"
              round
              icon="Download"
              size="small"
              @click="handleDownload(item.url)"
              >下载</el-button
            >
            <el-button
              type="text"
              round
              icon="Delete"
              size="small"
              @click="delFileName(item.url)"
              >删除</el-button
            >
          </div>
        </div>
      </div>
      <div class="border-bottom-title">
        <span style="float: left">
          <el-icon :size="22" color="#409EFC"><ChatDotRound /></el-icon>
        </span>
        <div>评论</div>
      </div>
      <div class="annex-box">
        <div
          class="annex-flex"
          v-for="item in commentList"
          :label="item.id"
          :value="item.id"
          :key="item.id"
        >
          <div class="annex-flex-6">
            <div style="height: 30px">
              <span>
                <el-avatar
                  :size="22"
                  :src="circleUrl"
                  style="float: left; margin: 10px 6px 0 0"
                />
              </span>
              <span> {{ item.createName }}</span>

              <span style="margin-left: 6px; font-size: 12px; color: #999">
                {{ item.createTime }}</span
              >
            </div>
            <div>{{ item.content }}</div>
          </div>
          <div class="annex-flex-1">
            <span style="float: left; padding: 5px 5px 0 0"
              ><el-icon :size="20"><Star /></el-icon></span
            >{{ item.goodNum }}
          </div>
        </div>
      </div>
      <div class="border-bottom-title">
        <span style="float: left">
          <el-icon :size="22" color="#409EFC"><ChatLineSquare /></el-icon>
        </span>
        <div>操作记录</div>
      </div>
      <div class="annex-box">
        <div
          class="annex-flex"
          v-for="item in operateList"
          :label="item.id"
          :value="item.id"
          :key="item.id"
        >
          <div class="annex-flex-1">
            <el-avatar
              :size="22"
              :src="circleUrl"
              style="float: left; margin: 10px 6px 0 0"
            />
          </div>
          <div class="annex-flex-12">
            <div style="height: 24px">
              <span> </span>
              <span style="color: #333"> {{ item.belongName }}</span>
              <!-- <span style="margin-left: 2px; font-size: 12px; color: #999">
                {{ item.targetName }}</span
              > -->
              <span style="margin-left: 16px; font-size: 11px; color: #999">
                <el-icon :size="14"><Clock /></el-icon>
                {{ item.createTime }}</span
              >
              <span style="margin-left: 16px; font-size: 11px; color: #333">
                {{
                  rsgl_conduct_type.find(a => a.value == item.dealStatus)
                    ? rsgl_conduct_type.find(a => a.value == item.dealStatus)
                        .label
                    : '--'
                }}
              </span>
              <span v-show="item.diffTime">，{{ item.diffTime }}</span>
            </div>
            <div style="height: 24px">{{ item.remark }}</div>
            <div
              class="cursor-pointer"
              style="line-height: 20px; padding-top: 12px"
              v-for="item in item.dealFilePath"
              :label="item.id"
              :value="item.id"
              :key="item.id"
              @click="handleDownload(item.url)"
            >
              附件：<span style="color: #1890ff"
                >《{{ item.origFileName }}》</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-input v-model="content" placeholder="请输入评论内容">
          <template #append>
            <el-button
              style="width: 100px"
              @click="toPublish"
              :loading="btnLoading"
              >发布</el-button
            >
          </template>
        </el-input>
      </div>
    </template>
    <revocationForm
      :revocationFrom="revocationFrom"
      @handleClose="handleClose"
    ></revocationForm>
  </el-dialog>
  <editForm v-if="isEdit" :taskId="taskId" @closeForm="closeForm"></editForm>
</template>
<script setup name="taskDetails">
import headaImage from '@/assets/images/icon/principal.png'
import editForm from './edit.vue'
import revocationForm from './revocation'
import useUserStore from '@/store/modules/user'
import {
  getTaskDetail,
  getTaskDeal,
  addTaskcomment,
  delTaskFileList
} from '@/api/taskManage/task'
import { delFile } from '@/api/salesManage/contractManage'

import { reactive, getCurrentInstance, toRefs } from 'vue'
import { useRouter } from 'vue-router'

const { proxy } = getCurrentInstance()
const is_show = computed(() => {
  return true
})
const userStore = useUserStore()
const router = useRouter()
const route = useRouter()
const data = reactive({
  dialogVisible: false,
  dialogHeight: '', //获取浏览器高度
  content: null,
  operateId: null,
  taskId: null,
  disposeFrom: {}, //详情
  operateList: [], //操作记录
  workFrom: {},
  isFinish: false,
  isBack: false,
  circleUrl: headaImage,
  circleUrlList: [],
  annexList: [], //附件
  commentList: [], //评论
  revocationFrom: {} //撤销
})
const {
  circleUrl,
  annexList,
  circleUrlList,
  taskId,
  workFrom,
  disposeFrom,
  operateList,
  commentList,
  operateId,
  isBack,
  content,
  dialogHeight,
  dialogVisible,
  revocationFrom
} = toRefs(data)
const btnLoading = ref(false) //按钮加载状态
const isEdit = ref(false)
const isRevocation = ref(false)
const props = defineProps({
  // 弹出框是否显示
  dialogParam: {
    required: true
  }
})
watch(
  () => props.dialogParam,
  val => {
    if (JSON.stringify(props.dialogParam) != '{}') {
      console.log('props.dialogParam', props.dialogParam)
      init()
      getTaskDetails()
    }
  },
  {
    deep: true,
    immediate: true
  }
)
const {
  task_reminder_time,
  rsgl_urgent_status,
  rsgl_task_status,
  rsgl_associated_item,
  rsgl_conduct_type,
  reminder_method,
  rsgl_question_type
} = proxy.useDict(
  'task_reminder_time',
  'rsgl_urgent_status',
  'rsgl_task_status',
  'rsgl_associated_item',
  'rsgl_conduct_type',
  'reminder_method',
  'rsgl_question_type'
)

//初始化
function init() {
  console.log(
    '2222===>',
    disposeFrom.value.createBy == userStore.user.userId &&
      props.dialogParam.isshow
  )
  dialogVisible.value = props.dialogParam.isVisible
  dialogHeight.value = document.documentElement.offsetHeight
  operateId.value = props.dialogParam.operateId
    ? props.dialogParam.operateId
    : ''
}
init()
//获取详情
async function getTaskDetails() {
  if (props.dialogParam.id) {
    await getTaskDetail({ id: props.dialogParam.id }).then(res => {
      disposeFrom.value = res.data
      operateList.value = res.data.operateList //操作记录
      for (let i = 0; i < operateList.value.length; i++) {
        operateList.value[i].dealFileName = operateList.value[i].dealFileName
          ? operateList.value[i].dealFileName.split(',')
          : ''
        operateList.value[i].dealFilePath = operateList.value[i].dealFilePath
          ? operateList.value[i].dealFilePath.split(',')
          : ''

        if (operateList.value[i].dealFilePath.constructor === Array) {
          let arrays = []
          operateList.value[i].dealFilePath.map((item, index) => {
            arrays.push({
              url: item,
              id: index
            })
          })
          operateList.value[i].dealFileName.map((item, i) => {
            if (arrays[i]) {
              arrays[i].origFileName = item
            }
          })
          operateList.value[i].dealFilePath = arrays
        }
      }

      commentList.value = res.data.commentList //评论

      let newArr = []
      annexList.value = []
      circleUrlList.value = []
      let array = res.data.players ? res.data.players.split(',') : ''
      let filePathList = res.data.filePath ? res.data.filePath.split(',') : ''
      let fileNameList = res.data.fileName ? res.data.fileName.split(',') : ''
      for (let i = 0; i < array.length; i++) {
        circleUrlList.value.push({
          img: circleUrl,
          title: array[i]
        })
      }
      if (res.data.filePath) {
        filePathList.map(item => {
          newArr.push({
            url: item,
            createName: disposeFrom.value.createName,
            createTime: disposeFrom.value.createTime,
            origFileName: ''
          })
        })

        console.log('newArr', newArr)
        fileNameList.map((item, i) => {
          if (newArr[i]) {
            newArr[i].origFileName = item
          }
        })
        annexList.value = newArr
      }
    })
  }
}
//操作按钮事情
const handleDownload = row => {
  const path = row
  window.open(path, '_blank')
  //   addDownloadLog({ fileId: row.fileId })
}
// 删除文件
async function delFileName(fileName) {
  console.log('fileList====', fileName)
  let data = {
    filePath: fileName,
    id: disposeFrom.value.id
  }
  try {
    proxy.$modal.confirm('是否删除该文件').then(async () => {
      const res = await delTaskFileList(data)
      if (res.code === 200) {
        proxy.$modal.msgSuccess('删除成功！')
        getTaskDetails()
      }
    })
  } catch (error) {
    proxy.$modal.msgError(error)
  }
}
/***评价***/
const toPublish = async () => {
  let params = {}
  params.taskId = props.dialogParam.id
  params.content = content.value
  btnLoading.value = true
  try {
    const res = await addTaskcomment(params)
    if (res.code === 200) {
      proxy.$modal.msgSuccess('评价成功！')
      btnLoading.value = false
      getTaskDetails()
      content.value = []
    }
  } catch (error) {
    btnLoading.value = false
  }
}
//编辑
function editItem() {
  isEdit.value = true
  taskId.value = props.dialogParam.id
  dialogVisible.value = false
  console.log('111', dialogVisible.value)
  //   proxy.$emit('close')
}
function revocationItem() {
  revocationFrom.value.isVisible = true
  revocationFrom.value.taskId = props.dialogParam.id
  console.log('revocationFrom', revocationFrom.value)
}
function handleClose() {
  revocationFrom.value.isVisible = false
}
function closeForm() {
  isEdit.value = false
  beforeClose()
}
//关闭
function beforeClose() {
  proxy.$emit('close', 'taskDeatil')
}
</script>

<style lang="scss" scoped>
::v-deep {
}
.disposeForm {
  display: block;
  background: #fff;
  .el-dialog__header {
    border-bottom: 1px solid #eee;
    margin-right: 0;
    margin: 0;
    padding: 0;
  }
  .el-input-group__append {
    background: #409efc;
    color: #fff;
  }

  .el-input__inner {
    padding: 18px 3px;
  }
  /*弹出框滚动条样式*/
  .trans-dialogScroll {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .my-header {
    display: flex;
    height: 36px;
    // flex-direction: row;
    // justify-content: space-between;
  }
  .el-button--small.is-round {
    padding: 15px 11px;
  }
  .dispose-title {
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  }
  .jx-color {
    color: #f59a23;
  }
  .wc-color {
    color: #4bd863;
  }
  .circleUrl-box {
    display: inline-block;
    .circleUrl-img {
      float: left;
      width: 70px;
      //   margin: 0 6px;
      text-align: center;
    }
  }
  .title-box {
    display: flex;
    .title-box-flex-1 {
      flex: 1;
    }
    .title-box-flex-6 {
      flex: 6;
    }
  }
  .border-bottom-title {
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: 15px;
    background: white;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #666;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  }
  .border-bottom-title span {
    float: left;
    padding: 10px 0 0 10px;
  }
  .border-bottom-title div {
    float: left;
    padding-left: 3px;
  }
  .annex-box {
    padding: 0px 10px 10px 10px;
    .annex-flex {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border: 1px solid #eee;
      padding: 12px 18px;
      line-height: 40px;
      margin-top: 18px;
      .annex-flex-6 {
        flex: 11;
        font-size: 14px;
      }
      .annex-flex-1 {
        flex: 1;
      }
      .annex-flex-12 {
        flex: 15;
        font-size: 14px;
      }
      .annex-flex-4 {
        flex: 4;
      }
      .annex-flex-3 {
        flex: 3;
      }
      .annex-flex-2 {
        flex: 2;
      }
      .annex-title {
        color: #409efc;
      }
    }
  }
}
</style>
